﻿@page "/blazor/components/{page}/{tab?}/{api?}"
@page "/blazor/labs/{page}/{tab?}/{api?}"

<MContainer Class="pa-4 pa-sm-6 pa-md-8"
            Fluid
            Tag="section">
    <div style="max-width: 960px"
         class="mx-auto overflow-visible">
        @if (_frontMatterMeta is not null)
        {
            <FrontMatter Meta="_frontMatterMeta" AdditionalTags="@Tags"></FrontMatter>
        }
        else
        {
            <MSkeletonLoader Type="article"></MSkeletonLoader>
        }

        @if (!IsAllComponentsPage)
        {
            <MTabs Value="IsApiTab.ToString()" Color="primary" Class="default-tabs m-bar--underline m-tabs-l mb-9">
                <MTab Value="@("False")" OnClick="@(() => NavigateToTab(""))">@I18n.T("demo")</MTab>
                <MTab Value="@("True")" OnClick="@(() => NavigateToTab("api"))">API</MTab>
            </MTabs>
        }

        <MTabsItems Value="IsApiTab.ToString()" Style="background-color: unset; overflow: unset;">
            <MTabItem Value="@("False")" Transition="" Eager>
                @if (_md == null)
                {
                    <MSkeletonLoader Type="article,card"></MSkeletonLoader>
                }
                else
                {
                    <DocumentMarkdownIt Source="@_md"
                                        OnTocParsed="@OnTocParsed"
                                        OnFrontMatterParsed="@OnFrontMatterParsed" />

                    @if (_frontMatterMeta?.Related?.Any() is true)
                    {
                        <BackMatter Related="@_frontMatterMeta.Related"></BackMatter>
                    }
                }
            </MTabItem>
            <MTabItem Value="@("True")" Transition="">
                @if (_apiData.Count == 0)
                {
                    <MSkeletonLoader Type="table"></MSkeletonLoader>
                }
                else
                {
                    <Apis @bind-Value="@CurrentApi"
                          Data="@_apiData"
                          GithubUri="@ApiGithubUri">
                    </Apis>
                }
            </MTabItem>
        </MTabsItems>

        <Contribute GithubUri="@(IsApiTab ? ApiGithubUri : ComponentGithubUri)" />
    </div>
</MContainer>
